<template>
  <van-popup class="h-80" ref="editRefs" v-model:show="pickerShow" position="bottom" round @close="onClose">
    <div id="edit-cont">
      <!--  -->
      <van-form class="mt-20" ref="formRef" label-width="80">
        <van-field
          v-model="form.nickName"
          name="nickName"
          label="用户昵称"
          placeholder="请输入"
          :rules="[{ required: true, message: '请输入客户名称' }]"
        />
        <van-field
          v-model="form.phonenumber"
          name="phonenumber"
          label="手机号码"
          type="number"
          placeholder="请输入"
          :rules="[{ pattern: pattern.phone, message: '请输入正确的手机号码' }]"
        />
        <van-field
          v-model="form.email"
          name="email"
          label="邮箱"
          placeholder="请输入"
          :rules="[{ pattern: pattern.email, message: '请输入正确的邮箱' }]"
        />
        <van-field name="sex" label="性别" :rules="[{ required: true, message: '请选择性别' }]">
          <template #input>
            <van-radio-group v-model="form.sex" direction="horizontal">
              <van-radio name="0">男</van-radio>
              <van-radio name="1">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>

      </van-form>

      <div class="btn-row flex-row-sb w-100">
        <van-button type="default" class="py-15 w-50" @click="onClose">关闭</van-button>
        <van-button type="success" class="py-15 w-50" @click="onConfirm" :loading="loading">提交</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, watch, defineEmits, defineExpose } from 'vue';
import { updateUserInfo } from '@/api/common';
import useStore from '@/store/index';
import { storeToRefs } from 'pinia';
import { showNotify } from 'vant';
const { user } = useStore();

const emits = defineEmits(['update:modelValue', 'onConfirm']);
const props = defineProps({
  // 传入的显影状态
  modelValue: {
    type: Boolean
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
});

const formRef = ref();
const pickerShow = ref(false);
const loading = ref(false);
const pattern = {
  email: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
  phone: /^1(3|4|5|6|7|8|9)\d{9}$/
};

const form = ref({
 ...user.userInfo,
});
console.log(form.value.nickName)
watch(
  () => [props.modelValue],
  ([n1, n2], [o1, o2]) => {
    if (n1 != o1) {
      pickerShow.value = n1;
    }
  }
);

async function onConfirm() {
  formRef.value
    .validate()
    .then(async () => {
      try {
        loading.value = true;
        const params = {
          ...form.value
        };

        await updateUserInfo(params);
        await user.getInfo()
        // updateUserInfo
        showNotify({ type: 'success', message: '提交成功' });
        emits('onConfirm');
      } finally {
        loading.value = false;
      }
    })
    .catch(e => {
      console.log(e);
    });
}

function onClose() {
  emits('update:modelValue', false);
}

defineExpose({
  loading
});
</script>
<style scoped lang="scss">
.btn-row {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  .van-button {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}
</style>
